<template>
  <div class="dashboard-container">
    <div class="top-button">
      <el-button size="small">新增试题</el-button>
      <el-button size="small">批量导入</el-button>
    </div>
    <!-- form表单区域 -->
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="80px" size="mini" :inline="true">
        <el-form-item label="学科">
          <el-select v-model="form.subjectID" placeholder="请选择" class="widthinput">
            <el-option :label="item.subjectName" :value="item.id" v-for="item in subjectsdata" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.chkState" placeholder="请选择" class="widthinput">
            <el-option :label="item.label" :value="item.value" v-for="item in status" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select v-model="form.difficulty" placeholder="请选择" class="widthinput">
            <el-option :label="item.label" :value="item.value" v-for="item in difficulty" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select v-model="form.questionType" placeholder="请选择" class="widthinput">
            <el-option :label="item.label" :value="item.value" v-for="item in questionType" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="form.tags" placeholder="请输入" class="widthinput"></el-input>
        </el-form-item>
        <el-form-item label="录入人">
          <el-input v-model="form.creatorID" placeholder="请输入" class="widthinput"></el-input>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="form.keyword" placeholder="请输入" class="widthinput"></el-input>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input v-model="form.remarks" placeholder="请输入" class="widthinput"></el-input>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-input v-model="form.satalogID" placeholder="请输入" class="widthinput"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select v-model="form.province" placeholder="请选择" class="widthinput" @change="getCityDatax">
            <el-option :label="item" :value="item" v-for="item in citysdata.provinces" :key="item"></el-option>
          </el-select>
          <el-select v-model="form.city"  style="margin-left: 20px;" placeholder="请选择" class="widthinput">
            <el-option :label="item" :value="item" v-for="item in citysdata.citys" :key="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业简介">
          <el-input v-model="form.shortName" placeholder="请输入" class="widthinput"></el-input>
        </el-form-item>
        <el-form-item label="方向">
          <el-input v-model="form.direction" placeholder="请输入" class="widthinput"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit">清除</el-button>
          <el-button type="primary" @click="questionAll">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- tab区域 -->
    <el-card class="box-card">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="全部" name="first">
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
        </el-tab-pane>
      </el-tabs>
      <!-- 数据表单 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="number"
          label="试题编号">
        </el-table-column>
        <el-table-column
          prop="subjectID"
          label="学科">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型">
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干">
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间">
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人">
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度">
        </el-table-column>
        <el-table-column
          label="使用次数">
        </el-table-column>
        <el-table-column
          prop="chkState"
          label="审核状态">
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见">
        </el-table-column>
        <el-table-column
          prop="chkUser"
          label="审核人">
        </el-table-column>
        <el-table-column
          prop="publishState"
          label="发布状态">
        </el-table-column>
        <el-table-column
          width="220px"
          label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" class="colorco" @click.native="handlechange(scope.row)">审核</el-button>
            <el-button size="mini" type="text" class="colorco" @click.native="handleSee(scope.row)">预览</el-button>
            <el-button size="mini" type="text" class="colorco" @click="choicestatus(scope.row)">{{scope.row.publishState===1?"已发布":(scope.row.publishState===2?"已下架":"待发布")}}</el-button>
            <el-button size="mini" type="text" class="colorco">修改</el-button>
            <el-button size="mini" type="text" class="colorco">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 题目预览弹窗 -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <div>
        <ul class="diaclass">
          <li>[题库]:面试宝典</li>
          <li>[学科]:{{xiangqing.subjectID}}</li>
        </ul>
        <ul class="diaclass">
          <li>[题型]:{{xiangqing.questionType}}</li>
          <li>[编号]:{{xiangqing.id}}</li>
          <li>[难度]:{{xiangqing.difficulty}}</li>
          <li>[标签]:{{xiangqing.tags}}</li>
        </ul>
        <ul class="diaclass">
          <li>[目录]:{{xiangqing.catalogID}}</li>
          <li>[企业]:{{xiangqing.enterpriseID}}</li>
          <li>[方向]:{{xiangqing.direction}}</li>
          <li>[城市]:{{xiangqing.city}}</li>
        </ul>
        <hr>
        <div style="marginLeft:40px">
          <p>[题干]:{{xiangqing.question}}</p>
          <p>多选题选项（以下选中的为正确答案）</p>
          <div>
            <el-checkbox v-for="(item, index) in xiangqing.options" :key="index" :checked="item.isRight===1" class="brbrbr">{{englishc[index]}}:{{item.code}}</el-checkbox>
          </div>
        </div>
        <hr>
        <span>[参考答案]:&nbsp;&nbsp;&nbsp;&nbsp;</span><el-button size="mini">视频答案预览{{xiangqing.videoURL}}</el-button>
        <hr>
        <p>[答案解析]:{{xiangqing.answerID}}</p>
        <p></p>
        <hr>
        <p>[题目备注]:{{xiangqing.remarks}}</p>
        <p></p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 题目审核弹窗 -->
    <el-dialog
      :visible.sync="dialogshenhe"
      :show-close = "false"
      width="60%"
      :before-close="handleClose">

      <el-row>
        <el-col :span="20">
          <div class="borderright">
            <ul class="diaclass">
              <li>[题库]:面试宝典</li>
              <li>[学科]:{{xiangqing.subjectID}}</li>
            </ul>
            <ul class="diaclass">
              <li>[题型]:{{xiangqing.questionType}}</li>
              <li>[编号]:{{xiangqing.id}}</li>
              <li>[难度]:{{xiangqing.difficulty}}</li>
              <li>[标签]:{{xiangqing.tags}}</li>
            </ul>
            <ul class="diaclass">
              <li>[目录]:{{xiangqing.catalogID}}</li>
              <li>[企业]:{{xiangqing.enterpriseID}}</li>
              <li>[方向]:{{xiangqing.direction}}</li>
              <li>[城市]:{{xiangqing.city}}</li>
            </ul>
            <hr>
            <div style="marginLeft:40px">
              <p>[题干]:{{xiangqing.question}}</p>
              <p>多选题选项（以下选中的为正确答案）</p>
              <div>
                <el-checkbox v-for="(item, index) in xiangqing.options" :key="index" :checked="item.isRight===1" class="brbrbr">{{englishc[index]}}:{{item.code}}</el-checkbox>
              </div>
            </div>
            <hr>
            <span>[参考答案]:&nbsp;&nbsp;&nbsp;&nbsp;</span><el-button size="mini">视频答案预览{{xiangqing.videoURL}}</el-button>
            <hr>
            <p>[答案解析]:{{xiangqing.answerID}}</p>
            <p></p>
            <hr>
            <p>[题目备注]:{{xiangqing.remarks}}</p>
            <p></p>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-button type="primary" size="mini" class="btnshenhe">审核通过</el-button><br>
            <el-button type="primary" size="mini" class="btnshenhe">审核不通过</el-button><br>
            <el-button type="primary" size="mini" class="btnshenhe">审核日志</el-button><br>
            <el-button type="primary" size="mini" class="btnshenhe">下一题</el-button><br>
            <el-button type="primary" size="mini" class="btnshenhe" @click="dialogshenhe = false">关闭</el-button>
          </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogshenhe = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="counts">
    </el-pagination>
  </div>
</template>

<script>
import { choice, choicePublish, detail } from '@/api/hmmm/questions'
import { list as subjectslist } from '@/api/hmmm/subjects.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { difficulty, status, questionType } from '@/api/hmmm/constants.js'
export default {
  name: 'QuestionsChoice',
  data() {
    return {
      form: {
        page: '',
        pagesize: '',
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: '',
        chkState: ''
      },
      counts: '',
      activeName: 'first',
      tableData: [],
      subjectsdata: [],
      citysdata: {},
      dialogVisible: false,
      dialogshenhe: false,
      xiangqing: {},
      englishc: [
        'A',
        'B',
        'C',
        'D',
        'F'
      ]
    }
  },
  created () {
    this.questionAll()
    this.subjectsAll()
    this.getCityData()
  },
  computed: {
    difficulty() {
      return difficulty
    },
    status() {
      return status
    },
    questionType() {
      return questionType
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    async questionAll () {
      const data = await choice(this.form)
      // console.log(data)
      console.log(this.form)
      this.tableData = data.data.items
      this.counts = data.counts
      // console.log(data)
    },
    async subjectsAll () {
      const data = await subjectslist()
      let alldata = await subjectslist({'pagesize': data.data.counts})
      this.subjectsdata = alldata.data.items
    },
    getCityData() {
      this.citysdata.provinces = provinces()
    },
    getCityDatax() {
      this.form.city = null
      this.citysdata.citys = citys(this.form.province)
    },
    async choicestatus(data) {
      var res = await choicePublish(data)
      console.log(res)
    },
    async handleSee(data) {
      console.log(111)
      let res = await detail(data)
      this.dialogVisible = true
      this.xiangqing = res.data
      console.log(res.data)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
      .then(_ => {
        done()
      })
      .catch(_ => {})
    },
    async handlechange(data) {
      let res = await detail(data)
      this.dialogshenhe = true
      this.xiangqing = res.data
      console.log(res.data)
    },
    onSubmit () {
      this.form = {
        page: '',
        pagesize: '',
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: '',
        chkState: ''
      }
    }
  }
}
</script>

<style scoped >
.dashboard-container {
  margin-left: 10px;
}
.box-card {
  margin-top: 20px;
}
.widthinput {
  width: 130px;
}
.colorco {
  cursor: pointer;
  color: #000;
}
.diaclass {
  display: flex;
}
.diaclass li {
  flex: 1;
  list-style: none;
}
.brbrbr {
  display: block;
}
.borderright {
  border-right: 1px solid #ccc;
}
.btnshenhe {
  margin-bottom: 15px;
  margin-left: 100px;
}
</style>
